import React, { Component } from 'react'
import '../style/less/home/HomeList/HomeList.less'
import { List } from 'antd-mobile';
const Item = List.Item;
const Brief = Item.Brief;
// import angular from '../style/images/angular.gif'
export default class HomeList extends Component {
    state = {
        data: [
            {
                angular: require('../style/images/angular.gif').default,
                text: '一套框架多种平台 移动端&桌面端',
                Htetx: '学会用 Angular 构建应用，把这些代码和能力复用在多种不同平台的应用上'
            },
            {
                angular: require('../style/images/vue.gif').default,
                text: '渐进式的JavaScript 框架',
                Htetx: '不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩'
            },
            {
                angular: require('../style/images/react.gif').default,
                text: '用于构建用户界面的 JavaScript 库',
                Htetx: '组件逻辑使用 JavaScript 编写而非模版，你可以轻松地在应用中传递数据，并使得状态与 DOM 分离'
            },
            {
                angular: require('../style/images/angular.gif').default,
                text: '一套框架多种平台 移动端&桌面端',
                Htetx: '学会用 Angular 构建应用，把这些代码和能力复用在多种不同平台的应用上'
            },
            {
                angular: require('../style/images/vue.gif').default,
                text: '渐进式的JavaScript 框架',
                Htetx: '不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩'
            },
            {
                angular: require('../style/images/react.gif').default,
                text: '用于构建用户界面的 JavaScript 库',
                Htetx: '不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩'
            }
        ]
    }
    render() {
        return (
            <div>
                <List className="my-list"  >
                    {
                        this.state.data.map((item,index)=>{
                          return <Item
                          key={index}
                            arrow="horizontal"
                            thumb={item.angular}
                            multipleLine
                            onClick={() => { }}
                        >
                            {item.text}<Brief>{item.Htetx}</Brief>
                        </Item>
                        })
                        
                    }
                </List>
            </div>
        )
    }
}
